<template>
  <view v-if="show_form=='login'" class="title-header">欢迎登录</view>
   <view v-if="show_form=='register'" class="title-header">用户注册</view>
  <view class="content">
    <view class="image-login-container">
      <van-image class="image-login"
        round
        width="10rem"
        height="10rem"
        src="http://8.130.37.134/api1/image/get/login.jpg"
      />
    </view>

    <van-form v-if="show_form === 'login'" @submit="onSubmit">
     <van-cell-group inset>
       <van-field
         v-model="form.username"
         name="用户名"
         label="用户名"
         placeholder="用户名"
        :rules="accountRules"
       />
        <van-field
          v-model="form.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="passwordRules"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="success" native-type="submit">
          点击登录
        </van-button>
        <view @click="show_form = 'register'" class="text-register">没有账号？注册一个</view>
      </div>
    </van-form>

    <van-form v-if="show_form === 'register'" @submit="onRegister">
      <van-cell-group inset>
        <van-field
          v-model="registerForm.username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="accountRules"
        />
        <van-field
          v-model="registerForm.password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="passwordRules"
        />
        <van-field
          v-model="registerForm.confirmPassword"
          type="password"
          name="确认密码"
          label="确认密码"
          placeholder="确认密码"
          :rules="passwordRules"
        />
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          注册并登录
        </van-button>
        <view @click="show_form = 'login'" class="text-register">已有账号？返回登录</view>
      </div>
    </van-form>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { Notify } from 'vant';
import {userLoginApi,userRegisterApi} from '../../apis/userApi.js'
const show_form = ref('login');


//登录表单
const form = ref({
  username: '',
  password: ''
});

//注册表单
const registerForm = ref({
  username: '',
  password: '',
  confirmPassword: ''
});
//账号格式校验规则
const accountRules = [
  { required: true, message: '请输入账号' },
  {
    pattern: /^.{0,16}$/,
    message: '账号不能超过16个字符'
  }
]
//密码格式校验规则
const passwordRules = [
  { required: true, message: '请输入密码' },
  {
    pattern: /^\w{6,16}$/,
    message: '密码需6-16个字符'
  }
]
 

//登录
const onSubmit = async() => {
	const res=await userLoginApi({username:form.value.username,password:form.value.password})
	if(res.code===0){
		//存储登录信息
		console.log('登录信息：',res.data)
		uni.setStorageSync('userInfo',JSON.stringify(res.data)) 
		Notify({ type: 'success', message: '登录成功！' });
		uni.switchTab({
		  url: '/pages/baby/baby'
		});
	}else{
		Notify({ type: 'danger', message: res.message });
	}
	
};
//注册登录
const onRegister = async() => {
	//两次密码一致校验
	if(registerForm.value.password!==registerForm.value.confirmPassword){
		Notify({ type: 'warning', message: '两次密码不一致！' });
		return
	}
	
	const res= await userRegisterApi(registerForm.value)
	if(res.code===0){
		Notify({ type: 'success', message: '注册登录成功！' });
		uni.switchTab({
		  url: '/pages/baby/baby'
		});
	}else{
		Notify({ type: 'danger', message: res.message });
	}
  
};
</script>

<style scoped>
.title-header {
  display: flex;
  justify-content: center;
  font-size: 35px;
  color: #999;
  margin-top: 10%;
}

.content {
  margin-top: 15%;
}

.image-login-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.image-login {}

.text-register {
  position: relative;
  top: 10px;
  left: 60%;
  color: #999;
}
</style>
